/*
 * @PageName:
 * @Description: 内容高度自适应自定义指令
 * @FilePath: /glm-mes-pc/src/directive/common/tableAdaptive.js
 */
export default {
	mounted: (el, binding, vnode) => {
		el.resizeListener = () => {
			setHeight(el, binding, vnode)
		}
		setHeight(el, binding, vnode)
		window.addEventListener('resize', el.resizeListener)
	},
	unmounted(el) {
		window.removeEventListener('resize', el.resizeListener)
	},
	updated(el, binding, vnode) {
		setHeight(el, binding, vnode)
	}
}

// set el-table height
function setHeight(el, binding, vnode) {
	// 元素距离窗口顶部的高度
	const top = binding?.value?.top ? binding.value.top : el.getBoundingClientRect().top
	// 底部预留的高度（分页高度为80px，底部icp备案高度为40px）
	const bottom = binding?.value?.bottom + 88 || (binding?.value?.withoutPagination ? 16 : 96)
	// 窗口高度
	const pageHeight = window.innerHeight
	// el.style.maxHeight = pageHeight - top - bottom + 'px'
	// el.style.overflowY = 'auto'
	if (vnode.ctx.props.hasOwnProperty('height')) {
		vnode.ctx.props.height = pageHeight - top - bottom
	} else {
		el.style.height = pageHeight - top - bottom + 'px'
		el.style.overflowY = 'auto'
	}
}
